﻿
@{
    ViewBag.Title = "歌手";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/styles/singer.css" rel="stylesheet" />
<div id="app">
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="height:40px;line-height:40px;padding-left:40px" class="breakcrumb">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>歌手</el-breadcrumb-item>
            <el-breadcrumb-item><font style="font-weight:800">歌手列表</font></el-breadcrumb-item>
        </el-breadcrumb>
        <p>
            <ul class="nickname">
                <li class="founs" @@click="searchSinger()">全部</li>
                <li v-for="item in firstChar" @@click="searchSinger(item)">{{item}}</li>
            </ul>
        </p>
        <br />
        <p>
            <ul class="country">
                <li class="founs" @@click="searchCountry()">全部</li>
                <li v-for="item in country" @@click="searchCountry(item.CountryId)">{{item.CountryName}}</li>
            </ul>
        </p>
        <el-row class="content">
            <el-col :span="4" :xs="8" :sm="6" :md="6" :lg="4" :xl="4" v-for="singer in singerlist" align="center">
                <div style="margin:24px 24px;width:100%">
                    <div class="image03">
                        <el-avatar :size="138" :src="singer.SingerPictrue"  ></el-avatar>
                        <div class="ovrly" @@click="SingeInfo(singer.SingerId)"></div>
                    </div>
                    <br />
                    <p><a class="singerlink">{{singer.SingerName}}</a><br /></p>
                    <p style="font-size:14px;color:#808080">{{singer.MusicCount}}首歌曲</p>
                </div>
            </el-col>
        </el-row>
        <div v-if="singerlist.length != 0" class="typePage">
            <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenation.totalCount" v-on:current-change="CurrentChange" :current-page="pagenation.currentPage" :page-size="24">
            </el-pagination>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                singerlist: [],
                pagenation: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
                firstChar: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                search: {
                    firstchar: '',
                    country:'',
                },
                country:[],
            }
        },
        methods: {
            GetAllSingerList() {
                axios.post('/Music/GetAllSingerlist', { 'CurrentPage': this.pagenation.currentPage, 'chars': this.search.firstchar, 'countrys': this.search.country }).then(res => {
                    this.singerlist = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                })
            },
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.GetAllSingerList();
            },//分页当前页改变
            SingeInfo(val) {
                window.location.href = "/Music/SingerdetailInfo?id=" + val;
            },
            searchSinger(val) {
                this.search.firstchar = val;
                this.GetAllSingerList();
            },
            searchCountry(val) {
                this.search.country = val;
                this.GetAllSingerList();
            },
            getCounrtyLsit() {
                axios.post('/Home/GetAllCountryMusic').then(res => {
                    this.country=res.data.data
                })
            }
        },
        mounted() {
            this.GetAllSingerList();
            this.getCounrtyLsit()
        }
    })
    $(".nickname").on("click", "li", function () {
        $(".nickname li").removeClass("founs");
        $(this).addClass("founs");
    })
    $(".country").on("click", "li", function () {
        $(".country li").removeClass("founs");
        $(this).addClass("founs");
    })
</script>